import React from "react";
import {
  Card,
  Table,
  Space,
  Button,
  Select,
  DatePicker,
  Input,
  Typography,
  Row,
  Col,
  Tag,
  Form,
  Layout,
} from "antd";
import {
  SearchOutlined,
  ReloadOutlined,
  ExportOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";

const { Title } = Typography;
const { RangePicker } = DatePicker;
const { Search } = Input;
const { Content } = Layout;

interface TaskData {
  key: string;
  project: string;
  days: string;
  assignee: string;
  priority: string;
  workHours: number;
  createdAt: string;
  actions: string;
}

const SearchList: React.FC = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "所属项目/泳道-任务卡名称(6/8)",
      dataIndex: "project",
      key: "project",
    },
    {
      title: "人天",
      dataIndex: "days",
      key: "days",
      render: (text: string) => text || "--",
    },
    {
      title: "经办人",
      dataIndex: "assignee",
      key: "assignee",
      render: (text: string) => text || "--",
    },
    {
      title: "优先级",
      dataIndex: "priority",
      key: "priority",
      render: (text: string) => {
        if (!text) return "--";
        const colorMap: Record<string, string> = {
          高: "red",
          中: "orange",
          低: "green",
        };
        return (
          <Tag color={colorMap[text] || "default"} data-oid=":iodfwu">
            {text}
          </Tag>
        );
      },
    },
    {
      title: "报工(h)",
      dataIndex: "workHours",
      key: "workHours",
      render: (text: number) => text || "--",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
      render: (text: string) => text || "--",
    },
    {
      title: "操作",
      dataIndex: "actions",
      key: "actions",
      render: () => (
        <Button type="link" data-oid="5_c9_69">
          ...
        </Button>
      ),
    },
  ];

  const data: TaskData[] = [
    {
      key: "1",
      project: "需求新方法论 (功能立项与看板及流程中心打通)",
      days: "--",
      assignee: "--",
      priority: "--",
      workHours: 0,
      createdAt: "--",
      actions: "...",
    },
    {
      key: "2",
      project: "特性 功能立项与看板及流程中心打通",
      days: "",
      assignee: "王宇壮",
      priority: "中",
      workHours: 0,
      createdAt: "2025-04-21 10:31:35",
      actions: "...",
    },
    {
      key: "3",
      project: "看板支持3.0立项需求建卡",
      days: "16.5",
      assignee: "陈建平",
      priority: "高",
      workHours: 0,
      createdAt: "2025-04-08 17:27:10",
      actions: "...",
    },
  ];

  const handleReset = () => {
    form.resetFields();
  };

  const handleExport = () => {
    // TODO: 实现导出功能
    console.log("导出数据");
  };

  return (
    <Layout className={styles.container} data-oid="9kk923s">
      <Content data-oid="tn-9i1i">
        <Card data-oid="-a7h_9r">
          <div className={styles.header} data-oid="z1-h8vh">
            <Title level={4} data-oid="15hcu.j">
              项目任务管理
            </Title>
            <Space data-oid="1.ejc_u">
              <Button
                icon={<ExportOutlined data-oid="aru.f:u" />}
                onClick={handleExport}
                data-oid=":o8ghr:"
              >
                导出
              </Button>
            </Space>
          </div>

          <Form
            form={form}
            layout="vertical"
            className={styles.searchForm}
            data-oid="lui14yy"
          >
            <Row gutter={[16, 16]} data-oid="5oxef3:">
              <Col span={6} data-oid="n-2qbiw">
                <Form.Item name="project" label="所属项目" data-oid="x249izk">
                  <Select placeholder="请选择" data-oid="30go40_">
                    <Select.Option value="dev" data-oid="qey91ks">
                      需求新方法论
                    </Select.Option>
                    <Select.Option value="feature" data-oid="dlhba8w">
                      特性功能
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="uoxuswi">
                <Form.Item name="assignee" label="经办人" data-oid="c4vn5xw">
                  <Select placeholder="请选择" data-oid="muul_gj">
                    <Select.Option value="王宇壮" data-oid="jyckxq3">
                      王宇壮
                    </Select.Option>
                    <Select.Option value="陈建平" data-oid="y5ya4wd">
                      陈建平
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="ynha7ad">
                <Form.Item name="priority" label="优先级" data-oid=":yhe44d">
                  <Select placeholder="请选择" data-oid="38ymfbi">
                    <Select.Option value="高" data-oid="2i-7nu3">
                      高
                    </Select.Option>
                    <Select.Option value="中" data-oid="viflpc2">
                      中
                    </Select.Option>
                    <Select.Option value="低" data-oid="ado0qko">
                      低
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="g_p3mv8">
                <Form.Item name="keyword" label="关键字" data-oid="li-etc6">
                  <Search
                    placeholder="请输入项目名称/任务名称"
                    data-oid="7kvll.z"
                  />
                </Form.Item>
              </Col>
              <Col span={24} style={{ textAlign: "right" }} data-oid="mhxa_hq">
                <Space data-oid="ej8qw_k">
                  <Button
                    icon={<ReloadOutlined data-oid="dz5zgrf" />}
                    onClick={handleReset}
                    data-oid="tbfwkj7"
                  >
                    重置
                  </Button>
                  <Button
                    type="primary"
                    icon={<SearchOutlined data-oid="hc.:3zu" />}
                    data-oid="ig.a8__"
                  >
                    搜索
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>

          <Table
            columns={columns}
            dataSource={data}
            pagination={{
              total: 50,
              pageSize: 10,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }}
            data-oid="vjrcnrz"
          />
        </Card>
      </Content>
    </Layout>
  );
};

export default SearchList;
